@extends('/welcome')
@section('zhong_content')
<style type="text/css">
  .aa{border:1px red solid;}
  .ss{border:2px red solid;}
</style>
  <div class="webz"> 
   <div class="sh-crumbs">
     当前位置： 
    <a href="" title="">首页</a> 
    <code>&gt;</code> 
    <a href="" title="服饰">服饰</a> 
    <code>&gt;</code> 
    <a href="" title="服装">服装</a> 
    <code>&gt;</code> 
    <a href="http:" title="打底衫/连衣裙">打底衫/连衣裙</a> 
    <code>&gt;</code> 岐氏姐妹 文艺复古秋款连衣裙 质朴棉麻 宽松舒适 
   </div> 
   <!-- 商品图/参数区域 --> 
   
   <div class="sh-goods-key clearfix"> 
    <div class="sh-goods-gallery"> 
   <!-- 放大镜 -->
     <div id="small" class="preview"> 
      <span id="small_span" class="jqzoom"><img id="simg" jqimg="" src="/uploads/{{$goods->pic}}" />
      <div id="move" class="move" style="width: 100px;height: 100px;
            background:url(/uploads/bg.png);
            position:absolute;left:0;top:0;display:none;">
      </div>
      </span> 
     
      <div class="sale-out"></div> 
     </div> 
     <div class="jqzoom-scroll clearfix"> 
      
      <a class="next"></a> 
      <div class="items"> 
       <ul> 
        <li class="active"> <img alt="岐氏姐妹 文艺复古秋款连衣裙 质朴棉麻 宽松舒适" title="优品惠岐氏姐妹 文艺复古秋款连衣裙 质朴棉麻 宽松舒适" src="/uploads/{{$goods->pic}}" /> </li> 
        <!-- 小图循环 -->
       </ul> 
      </div> 
     </div> 
         <!-- 放大镜 -->
     <div class="sh-goods-share clearfix"> 
      <input id="goods_id" value="74469" type="hidden" /> 
      <input id="goods_cid" value="653" type="hidden" /> 
      <input id="first_cat" value="服饰" type="hidden" /> 
      <div class="no">
       商品货号：545528_001
      </div> 
      <div class="baidu-share"> 
       <!-- Baidu Button BEGIN --> 
       <div id="bdshare" class="share bdshare_t bds_tools get-codes-bdshare"> 
        <span class="bds_more"><i></i>分享</span> 
        <a href="{{url('/home/collect/index')}}" class="bds_more concernsinfo"><i></i>查看收藏商品</a> 
       </div> 
       <!-- Baidu Button END --> 
       <div class="concerns"> 
        <span class="concerns-text" id="concerns"> <i></i>
        <a href="" id="concernsinfo">@if($res == 1) 已收藏 @else 收藏 @endif</a></span> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="sh-goods-parameters"> 
   <div id="big" class="big" style="width: 500px;height: 500px;position:relative 
;
      overflow: hidden;display:none;">
    <img style="position: absolute;left:-200px;" id="bimg" src="/uploads/{{$goods->pic}}" width="800px">
   </div>
     <form action="#"> 
      <div class="brand clearfix"> 
       <span class="country-brand"> <a target="_blank" alt="岐氏姐妹" title="优品惠岐氏姐妹" href="/brand_4569.html?tp=DetailPage.1">{{$goods->brand}}</a> </span> 
      </div> 
      <h1 class="title">{{$goods->goods_name}}</h1> 
      <div class="description">
         {!!$goods->content!!} 
      </div>  
      <div class="price-box">
         <ul class="a-good-infos">
         	<li class="mb">
		        <span class="label price-label">价格</span>
		        <span class="price" alt="259" id="rel_price"><i>￥</i>{{$goods->price}}</span> 
		    </li>
		    <li>
		        <span class="label">优惠</span>
		        <div>
		            <p>
		            	<span class="tag">包邮</span>
		            	<span>订单金额满168元包邮</span>
		            </p>
		        </div>
		    </li>
		</ul>
	</div>
      <div class="choice-buy"> 
       <dl class="color clearfix"> 
        <dt>
         颜色
        </dt> 
        <dd id="color"> 
         <a target="_self"> <span id="c_74469" alt="1" class="select"><i></i><img alt="红色" title="红色" src="/uploads/{{$goods->pic}}" /></span> </a> 
         <a target="_self"> <span id="c_74469" alt="2" class="select" style="border:2px solid #FFFF33;"><i></i><img alt="黄色" title="黄色" src="/uploads/{{$goods->pic}}" /></span> </a> 
         <a target="_self"> <span id="c_74469" alt="3" class="select" style="border:2px solid #000099;"><i></i><img alt="蓝色" title="蓝色" src="/uploads/{{$goods->pic}}" /></span> </a> 
         <a target="_self"> <span id="c_74469" alt="4" class="select" style="border:2px solid #006633;"><i></i><img alt="绿色" title="绿色" src="/uploads/{{$goods->pic}}" /></span> </a> 
         <a target="_self"> <span id="c_74469" alt="6" class="select" style="border:2px solid #000000;"><i></i><img alt="黑色" title="黑色" src="/uploads/{{$goods->pic}}" /></span> </a>
         <a target="_self"> <span id="c_74469" alt="5" class="select" style="border:2px solid #FFFFFF;"><i></i><img alt="白色" title="白色" src="/uploads/{{$goods->pic}}" /></span> </a> 
        <!-- 小图循环 -->
        </dd> 
       </dl> 
       <dl class="size clearfix"> 
        <dt>
          尺码 
        </dt> 
        <dd id="size"> 
         <span id="s_545528101" pid="22" alt="1" @if(!in_array(1,$size)) style="display:none;" @endif>S</span> 
         <span id="s_545528100" pid="22" alt="2" @if(!in_array(2,$size)) style="display:none;" @endif>M</span> 
         <span id="s_545528107" pid="22" alt="3" @if(!in_array(3,$size)) style="display:none;" @endif>L</span> 
         <span id="s_545528102" pid="22" alt="4" @if(!in_array(4,$size)) style="display:none;" @endif>XL</span> 
         <span id="s_545528103" pid="22" alt="5" @if(!in_array(5,$size)) style="display:none;" @endif>XXL</span> 
         <span class="size" id="show-size-table"><i></i>尺码表</span> 
        </dd> 
       </dl> 
       <dl class="number clearfix"> 
        <dt>
         数量
        </dt> 
        <dd id="goodsNumber"> 
         <div class="box"> 
          <a href="" id="lessBtn">-</a> 
          <input id="goods_gw_id" type="hidden" name="id" value="{{$goods->id}}">
          <input class="l shuliang" id="goodsNumberInput" value="1" type="text" name="num" /> 
          <a href="" id="addBtn">+</a> 
         </div> 
         <!--<span class="err-info"><i></i>限购6件</span>--> 
        </dd> 
       </dl> 
      </div> 
      <div class="add-cart"> 
        {{ csrf_field() }}
       <button type="button" class="sh-shopping-cart aa" data-name="addCartTrigger" data-trigger-status="open" data-thum="/themes/ugo/images/2016/2016_goods/demo/zoom-sm-1.jpg"> <i></i> 加入购物车 </button> 
      </div> 
     </form> 
    </div> 
   </div> 
   <div class="sh-goods-similar similar-header" style="display:none;"> 
   </div> 
   <div class="sh-goods-declaration"> 
    <img class="lazy-loading" src="/Home/details/Picture/grey.png" data-original="/themes/ugo/images/2016/2016_goods/declaration2.jpg" /> 
   </div> 
   <div class="sh-goods-details clearfix"> 
    <!-- 商品tab组/同类 --> 
    <div class="group"> 
     <div class="related"> 
      <div class="tab clearfix"> 
       <div class="tab-select"> 
        <a class="active" href="#details" title="" data-scorll="details">商品详情</a> 
        <a href="#comments" title="" data-scorll="comments">评论 <span id="flcomments">()</span></a> 
        <a href="#services" title="" data-scorll="services">服务说明</a> 
       </div> 
       <div class="ext"> 
        <div class="options"> 
         <span id="ext_color"></span> 
         <span id="ext_size"></span> 
        </div> 
        <div class="ext-cart-info"> 
         <span id="ext_num"></span> 
         <span class="price" id="ext_price"></span> 
         <button class="sh-shopping-cart" data-name="addCartTrigger" data-trigger-status="open" data-thum="/themes/ugo/images/2016/2016_goods/demo/zoom-sm-1.jpg"><i></i>加入购物车</button> 
        </div> 
       </div> 
      </div> 
      <div class="details" id="details"> 
       <h3 class="title"></h3> 
       <ul class="details-table sh-goods-block"> 
        <li class="row clearfix"> 
         <div class="title">
          <span>商品名称</span>
         </div> 
         <div class="details">
          {{$goods->goods_name}}
         </div> </li> 
        <li class="row clearfix"> 
         <div class="title text-left">
          <span>品牌</span>
         </div> 
         <div class="details">
          {{$goods->brand}}
         </div> </li> 
        <li class="row clearfix"> 
         <div class="title">
          <span>上架时间</span>
         </div> 
         <div class="details">
          {{$goods->addtime}}
         </div> </li> 
        <li class="row clearfix"> 
         <div class="title">
          <span>规格参数</span>
         </div> 
         <div class="details">
         {!! $goods->content !!}
         </div> </li> 
        <li class="row clearfix"> 
         <div class="title">
          <span>包装清单</span>
         </div> 
         <div class="details"> 
          <p> {{$goods->store}}件 </p> 
         </div> </li> 
       </ul> 
       <div class="pic sh-goods-block"> 
        <p>
        <img class="lazy-loading" src="/uploads/{{$goods->pic}}" data-original="http://img.17ugo.com/images/upload/Image/2016081208331467cedn.jpg" alt="" /></p> 
       </div> 
      </div> 
      <div class="comment clearfix" id="comments"> 
       <h3 class="title"></h3> 
       <div class="comment-box"> 
        <div class="inner-header clearfix"> 
         <div class="select-comment"> 
          <ul> 
           <li> <input checked="checked" name="comment" value="all" id="all" type="radio" />全部评论()</li> 
           <li> <input name="comment" value="good" id="good" type="radio" />好评()</li> 
           <li> <input name="comment" value="general" id="general" type="radio" />中评(5)</li> 
           <li> <input name="comment" value="bad" id="bad" type="radio" />差评(0)</li> 
          </ul> 
         </div> 
        </div> 
        <div class="comment-box-list"> 
         <ul class="comment-list" id="goods_comment">
		@foreach($comment as $k=>$v)	
         <li class="clearfix">
                    <div class="descrption">
                        <p class="text">
                            {!!$v->content!!}
                        </p>
                        <ul class="clearfix"></ul>
        <p class="datetime">{{$v->time}}</p>
            </div>
            <div class="attr">
                <p>
                 &nbsp;
                </p>
                <p>
                  &nbsp;
                </p>
            </div>
            <div class="author">
                <span>{{$v->username}}</span>
                <i class="comment-star comment-star-5"></i>
            </div>
        </li> 
        @endforeach
         </ul> 
        </div> 
       </div> 
       <div class="comment-page"> 
       </div> 
      </div> 
      <div class="service" id="services"> 
       <h3 class="title"></h3> 
       <div class="service-box sh-goods-block"> 
        <img class="lazy-loading" src="/uploads/{{$goods->pic}}" data-original="/themes/ugo/images/2016/2016_goods/fei-service-pay.jpg" alt="" title="" /> 
      
       </div> 
       <div class="seo sh-goods-block"> 
        <div class="box clearfix"> 
         <span class="label">使用指南：</span> 
         <div class="hide"> 
          <ul class="left"> 
           <li><a href="http://info.ugoshop.com/info-6859.html" target="_blank">1. 今夏流行服装款式展示</a></li> 
           <li><a href="http://info.ugoshop.com/info-6692.html" target="_blank">2. 超赞春款连衣裙 街头扮靓必备</a></li> 
          </ul> 
          <a href="javascript:;" id="more_guide" class="more left"><span>查看更多</span><i class="hide"><i></i></i></a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 商品图/同类商品区域 --> 
     <div class="sh-goods-similar similar-footer"> 
      <div class="inner-header"> 
       <div class="icon-vl"> 
        <i></i> 
       </div> 
       <strong>看看其他同类商品</strong> 
      </div> 
      <ul class="clearfix" id="final_buy"> 
      </ul> 
     </div> 
    </div> 
    <!-- 大家都在看 --> 
    <div class="watching"> 
     <h3 class="title"> 大家都在看 </h3> 
     <ul id="all_watching"> 
     </ul> 
    </div> 
   </div> 
  </div>
@endsection
@section('myjs')
<script type="text/javascript">
  //数量限制
    $('.shuliang').blur(function(){
      var shuliang = $(this).val();
      var reg = /^\d+$/;
      if(!reg.test(shuliang)){
        $(this).val('1');
      }
    })
  //绑定数量加减事件
  //定义全局当前文本对象
  //获取元素
  $('#lessBtn').click(function(){
    // alert('减法');
    var num = parseInt($('#goodsNumberInput').val());
    num--;
    if(num == 0){
      num = 1;
    } 
    $('#goodsNumberInput').val(num);
    // alert(val);
    return false;
  });
  $('#addBtn').click(function(){
    // alert('加法');
    var num = parseInt($('#goodsNumberInput').val());
    num++;
    $('#goodsNumberInput').val(num);
    // alert(val);
    return false;
  });
  //绑定尺寸事件
  $('span[pid=22]').click(function(){

  });

    //=================获取尺寸=================
    var size = null; 
    $('#size span').click(function(){
       size = $(this).attr('alt');
       // $(this).find('span').addClass('size');
       // $(this).addClass('size').siblings().removeAttr('size');
    });

    //================获取颜色====================
    var color = null; 
    $('#color span').click(function(){
       color = $(this).attr('alt');
       // $(this).find('span').addClass('size');
       $(this).addClass('ss');
    });
  //绑定购物车跳转 button 事件
  $('.aa').click(function(){
    if(size == null){
      alert('还没选中尺码');
      return;
    }
    if(color == null){
      alert('还没选中衣服颜色');
      return;
    }
    //获取ID和num数量
    // alert(22222);
    var id = $('#goods_gw_id').val();
    var num = $('#goodsNumberInput').val();
    // alert(size);
    // console.log(id,num);
    $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
    });
    //发送ajax
    $.get("{{url('/cart/insert')}}",{id:id,num:num,size:size,color:color},function(data){
      console.log(data);
      if(data == 1){
        // alert('添加成功');
         location.href="{{url('/home/cart/cart')}}";
      }else{
        alert('添加失败');
      }
    });
    
  });
  //绑定收藏跳转事件
  $('#concernsinfo').click(function(){
      var goods_id = $('#goods_gw_id').val();
      // alert($('#concernsinfo').html());
      // console.log(goods_id);
      $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
      });
      //发送ajax
      $.get("{{url('/home/collect/insert')}}",{goods_id:goods_id},function(data){
        console.log(data);
        if(data == 1){
          alert('收藏成功');
          $('#concernsinfo').html('已收藏');
        }
        if(data == 3){
          alert('该物品已收藏');
        }
        if(data == 2){
          alert('收藏失败');
        }
        if(data == 4){
          alert('用户未登录,请前往登录页面登录');
        }
      });
      return false;
  });

  // ======================绑定尺寸  颜色 选中样式

  $('.color img').click(function(){
    // alert(222);
    $(this).addClass('aa');
    $(this).siblings().removeClass('aa');
  })

  // $('.size span').click(function(){
  //   // alert(222);
  //   // $(this).addClass('ss');
  //   // $(this).siblings().removeClass('aa');
  // })
    


    //=====================放大镜===================
    //获取元素
    $('.jqzoom').mousemove(function(e){
      // alert('放大镜');
      //显示移动div和大图
      $('.move').show();
      $('.big').show();
      //相对于文档位置获取鼠标位置
      // var x = e.clientX;
      var x = e.pageX;
      // var y = e.clientY;
      var y = e.pageY;
      // console.log(x);

      // 获取图片距离父级的left和top
      var s_l = $(this).offset().left;
      // var small_juli = $(this).offset().left;
      var s_t = $(this).offset().top;
      //获取移动div的宽高/2
      var m_w = $('.move').width()/2;
      var m_h = $('.move').height()/2;
      // console.log(m_w,m_h);
      //移动div想对与父级的left 和 top
      var l = x - s_l - m_w;
      var t = y - s_t - m_h;
      // console.log(l,t);
      //越界判断
      if(l < 0){
        l = 0;
      }
      //向右移动最大值

      var max_l = $(this).width()-$('.move').width();
      if(l > max_l){
        l = max_l;
      }
      //获取最大的left和top
       //越界判断
      if(t < 0){
        t = 0;
      }
       var max_t = $(this).height()-$('.move').height();
      if(t > max_t){
        t = max_t;
      }


      //修改位置
      $('.move').css({left:l,top:t});
      //计算右图的left和top
      var s_w = $(this).width();
      var s_h = $(this).height();
      // 获取大图的宽和高
      var b_w = $('#bimg').width(); 
      var b_h = $('#bimg').height(); 
      
      //有图移动 比例
      var w_bili = l/s_w;
      var h_bili = t/s_h;

      var b_l = w_bili*b_w;
      var b_t = h_bili*b_h;

      $('#bimg').css({left:-b_l+'px',top:-b_t+'px'});
      //获取右侧图片的宽高
      var b_height = $('#big').height();
      var b_width = $('#big').width();
      var move_bili_w = b_width/b_w;
      var move_bili_h = b_height/b_h;
    //   //计算移动div的宽高
      var m_width = move_bili_w*s_w;
      var m_height = move_bili_h*s_h;
    //   //设置移动div的宽高
      $('#move').css({width:m_width+'px',height:m_height+'px'});

    })
    // //绑定鼠标离开事件
    $('#small_span').mouseout(function(){
      $('#big').hide();
      $('#move').hide();
    })

</script>

@endsection